<template>
  <div class="goods-details">
    <!-- 饮食介绍 -->
    <swiper :options="bannerOption" class="swiper-ad">
      <swiper-slide class="swiper-ad-img" v-for="(item, index) in picture" :key="index"><span class="img"><img :src="item"></span></swiper-slide>
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
    <div class="info-p">
      <p class="title">{{title}}</p>
      <p class="price"><span>￥</span>{{price}}<s>¥{{original_price}}</s></p>
      <div class="num">
        <span class="tip">数量选择</span>
        <div class="operate">
          <span @click="jian"><img src="@/assets/gouwuche06.png"></span>
          <span class="pay_num">{{num}}</span>
          <span @click="jia"><img src="@/assets/gouwuche07.png"></span>
        </div>
      </div>
    </div>
    <div class="details">
      <p>商品详情</p>
      <!--<img src="@/assets/shipinxiangqing07.png">-->
      <div v-html="content"></div>
    </div>
    <div class="btn">
      <div class="cart" @click="router({path: './cart'})">
        <img src="@/assets/shangpinxiangqing04.png" alt="">
        <i>{{cartLength}}</i>
      </div>
      <span @click="addCart()" class="btn-flex left">加入购物车</span>
      <span class="btn-flex right" @click="toBuy()">立即购买</span>
    </div>
  </div>
</template>

<script>
import { XInput, XAddress, ChinaAddressV4Data, AlertModule } from 'vux'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import {goodsdetails, postaddgoods, shopcartlists} from '@/api/api'
import { commonShare } from "@/config/wxshare"
export default {
  components: {
    swiper,
    AlertModule,
    swiperSlide
  },
  data () {
    return {
      num: 1,
      id: this.$route.query.id,
      bannerOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        loop: true,
        observer:true,
        observeParents:true,
      },
      title:null,
      content:null,
      price:0,
      original_price:0,
      picture:[],
      cartLength: '',
    }
  },
  created () {
      this.goodsdetail()
      this.getCartLists()
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    },
    jian () {
      if(this.num <= 1) {
        return 
      }
      this.num--
    },
    jia () {
      this.num++
    },
    goodsdetail () {  //商品详情
      var jsonget = {
        id: this.$route.query.id,
      };
      goodsdetails(jsonget).then((res) => {
        this.title = res.data.data.title;
        this.content = res.data.data.content;
        this.price = res.data.data.price;
        this.original_price = res.data.data.original_price;
        this.picture = res.data.data.picture;
        commonShare(this.picture[0], '智慧宝优选商品', this.title);
      })
    },
    toBuy(){
      var lists = [{id:this.id ,num:this.num}];
      this.router({path: './goodsConfirmOrder',query: {goodsLists:JSON.stringify(lists)}})
    },
    addCart(){
      postaddgoods({id:this.id,num:this.num}).then((res)=>{
        this.getCartLists()
        AlertModule.show({
          title: '系统提示',
          content: res.data.msg,
          onHide: () =>{
          }
        })
      })
    },
    // 获取购物车列表
    getCartLists() {
      shopcartlists().then((res) => {
        this.cartLength = 0;
        for(var i in res.data.data){
          this.cartLength = Number(this.cartLength) + Number(res.data.data[i].num)
        }
      }).catch((err) => {
        console.dir(err)
      })
    },
  }
}
</script>
<style lang="stylus" scoped>
  .goods-details
    background-color #f2f2f2
    min-width 100vw
    min-height 100vh
    .swiper-ad
      .img
        height 28.2rem
        display flex
        img
          object-fit cover
    .info-p
      background-color #fff
      margin-bottom 1rem
      padding 2rem 1.5rem
      .title
        line-height 2.4rem
        font-size 1.5rem
        color #333
        font-weight bold
      .price
        color #D03718
        font-weight bold
        font-size 1.7rem
        margin-top 1rem
        span
          font-size 1.3rem
          font-weight 400
        s
          color #ccc
          font-size 1.3rem
          font-weight 400
          margin-left .5rem
      .num
        border-top 1px solid #e5e5e5
        margin-top 2rem
        display flex
        padding-top 3rem
        padding-bottom 1rem
        position relative
        .tip
          line-height 2.7rem
          font-size 1.5rem
          color #999
        .operate
          display flex
          flex 1
          position absolute
          right 0
          top 2.5rem
          span
            display block
            flex 1
            max-width 3.7rem
            max-height 3.7rem
            width 3.7rem
            height 3.7rem
            box-sizing border-box
            border 1px solid #e5e5e5
            text-align center
            line-height 3.7rem
            img
              width 1.3rem
              display inline-block
              vertical-align middle
              position relative
              top -.2rem
          .pay_num
            border none
            text-align center
            line-height 3.7rem    
            max-width 4.6rem      
            width 4.6rem
            border-top 1px solid #e6e6e6
            border-bottom 1px solid #e6e6e6
            box-sizing border-box
            font-size 1.7rem
            color #A81E27
    .details
      padding 2rem 1.5rem
      background-color #fff
      margin-bottom 6.4rem
      p
        font-size 1.6rem
        color #333
        font-weight bold
        margin-bottom 1rem
    .btn
      background-color #FFF
      line-height 5rem
      text-align center
      height 5rem
      position fixed
      bottom 0
      width 100%
      display flex
      border-top 1px solid #e6e6e6
      .cart
        width 7.5rem
        max-width 7.5rem
        border-right 1px solid #e6e6e6
        box-sizing border-box
        position relative
        img
          width 2.2rem
          position relative
          left 50%
          margin-left -1.1rem
          top 1.5rem
        i
          position absolute
          width 1.4rem
          font-size .9rem
          line-height 1.4rem
          text-align center
          border .1rem solid #fff
          border-radius 50%
          top .9rem
          color #fff
          right 1.7rem
          background-color #D03718
      .btn-flex
        flex 1
        font-size 1.5rem
        font-weight 500
      .left
        color #172F6D
      .right
        color #fff
        background-color #172F6D
</style>